<template>
  <div>
    <v-viewer ref="view"></v-viewer>
    <div class="customer-area">
      <div class="title">
        <div class="point"></div>
        <span>产品信息</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>产品图片</span>
          </div>
        </el-col>
        <el-col :span="19">
          <pic-view :pic-url-list.sync="productDetail.productPicUrlList"
                    upload-class="short-upload"
                    :pic-name-list.sync="productDetail.productPicNameList"
                    :max-size="1"
                    :upload-type="!isInfo"
                    disabled="true"
                    @showImg="showImg"></pic-view>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>区域</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.cityNames | joinArray(productDetail.cityNames)}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品公司全称</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.companyName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>方案名称</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.productName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>车型</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.brandName }} - {{ productDetail.seriesName }} - {{ productDetail.modelName }} - {{ productDetail.color }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>市场指导价</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.carPrice||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>首付金额</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.downpayAmount||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>月供</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.monthlyPay||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>分期</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.period }}期</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>可上牌城市</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.inUseCity }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>车辆类型</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.carType }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>总利润</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.profit||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>产品信用等级</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.grade }}级</span>
        </el-col>
      </el-row>
      <el-row v-for="(item, fileKey) in fileAllList"
              :key="fileKey"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <el-col :span="19">
          <el-col>
            <span>{{ item.name }}</span>
            <a :href="item.filePath"
               target="_blank">下载</a>
          </el-col>
          <el-col v-if="item.exampleLoop && item.exampleLoop.length > 0">
            <el-col :span="3"
                    v-for="(ele, exmKey) in item.exampleLoop"
                    :key="exmKey">
              <pic-view :pic-url-list.sync="ele.urls"
                        upload-class="short-upload"
                        :pic-name-list.sync="ele.names"
                        :max-size="1"
                        @showImg="showImg"></pic-view>
              <div class="stalker">
                <span>{{ ele.display }}</span>
              </div>
            </el-col>
          </el-col>
        </el-col>
      </el-row>
      <el-row v-for="item in videoAllList"
              :key="item.dataAttrId"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <template v-if="item.videoList">
          <div v-for="(videoItem, index) in item.videoList"
               :key="index"
               class="upload-video">
            <video :src="videoItem.url"
                   class="avatar video-avatar"
                   controls="controls">您的浏览器不支持视频播放</video>
          </div>
        </template>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>资质要求</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.qualify | joinArray(productDetail.qualify) }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>审核材料</span>
          </div>
        </el-col>
        <el-col :span="20">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <div class="collapse-item-title"><span>主贷人材料</span></div>
              </template>
              <div v-for="(item, key) in productDetail.lastAttrsList"
                   :key="key">
                <el-col class="checkbox-item"
                        :span="4"
                        v-if="productMaterial.mainLender.some(a=>a.dataAttrId== JSON.parse(item).dataAttrId)">
                  <span>{{ productMaterial.mainLender.filter(a=>a.dataAttrId== JSON.parse(item).dataAttrId)[0]['name'] }}</span>

                </el-col>
              </div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <div class="collapse-item-title"><span>配偶材料</span></div>
              </template>
              <div v-for="(item, key) in productDetail.lastAttrsList"
                   :key="key">
                <el-col class="checkbox-item"
                        :span="4"
                        v-if="productMaterial.mateLender.some(a=>a.dataAttrId== JSON.parse(item).dataAttrId)">
                  <span>{{ productMaterial.mateLender.filter(a=>a.dataAttrId== JSON.parse(item).dataAttrId)[0]['name'] }}</span>

                </el-col>
              </div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <div class="collapse-item-title"><span>担保人材料</span></div>
              </template>
              <div v-for="(item, key) in productDetail.lastAttrsList"
                   :key="key">
                <el-col class="checkbox-item"
                        :span="4"
                        v-if="productMaterial.guarantorLender.some(a=>a.dataAttrId== JSON.parse(item).dataAttrId)">
                  <span>{{ productMaterial.guarantorLender.filter(a=>a.dataAttrId== JSON.parse(item).dataAttrId)[0]['name'] }}</span>

                </el-col>
              </div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <div class="collapse-item-title"><span>担保人配偶材料</span></div>
              </template>
              <div v-for="(item, key) in productDetail.lastAttrsList"
                   :key="key">
                <el-col class="checkbox-item"
                        :span="4"
                        v-if="productMaterial.guarantorMateLender.some(a=>a.dataAttrId== JSON.parse(item).dataAttrId)">
                  <span>{{ productMaterial.guarantorMateLender.filter(a=>a.dataAttrId== JSON.parse(item).dataAttrId)[0]['name'] }}</span>
                </el-col>
              </div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <div class="collapse-item-title"><span>车辆材料</span></div>
              </template>
              <div v-for="(item, key) in productDetail.lastAttrsList"
                   :key="key">
                <el-col class="checkbox-item"
                        :span="4"
                        v-if="productMaterial.carLender.some(a=>a.dataAttrId== JSON.parse(item).dataAttrId)">
                  <span>{{ productMaterial.carLender.filter(a=>a.dataAttrId== JSON.parse(item).dataAttrId)[0]['name'] }}</span>
                </el-col>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row :gutter="10"
              v-if="productDetail.beneficiary">
        <el-col :span="3">
          <div class="content-title">
            <span>保险单特别约定</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.beneficiary }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品经理</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.manager }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品经理手机号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.managerPhone }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="foot">
      <el-button @click="() => {this.$router.go(-1)}"
                 type="primary">确定</el-button>
    </div>
  </div>
</template>

<style lang="scss">
.checkbox-item {
  border-bottom: 1px solid #ecedf2;
  border-left: 1px solid #ecedf2;
}
.el-col span {
  text-align: left;
}
.upload-video {
  display: inline-block;
  margin: 0 10px 0 5px;
}
.video-avatar {
  width: 325px !important;
  height: 200px !important;
}
</style>

<script>
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import { joinArray } from '@/utils/filters'
import { material } from '@/utils/data'
import { api } from '@/api'
import { validatenull } from '@/utils/validate'
import { packageImgList } from '@/utils/imgPackage'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      productMaterial: material,
      isInfo: this.infoFlag === '1',
      fileAllList: [],
      videoAllList: [],
      productDetail: {}
    }
  },
  props: [
    'productId'
  ],
  activated() {
    this.initialized()
    this.getProductDetail()
  },
  components: { picView, vViewer },
  methods: {
    joinArray,
    initialized() {
      this.$http.get(api.SYS_PRODUCT_INITIALIZE_MATERIAL, { productId: this.productId }).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            const add = res.data
            if (!validatenull(this.productId)) {
              const modifier = JSON.parse(JSON.stringify(material))
              modifier.mainLender.splice(modifier.mainLender.length - 1, 0, ...add.addMainLender)
              modifier.mateLender.splice(modifier.mateLender.length - 1, 0, ...add.addMateLender)
              modifier.guarantorLender.splice(modifier.guarantorLender.length - 1, 0, ...add.addGuarantorLender)
              modifier.guarantorMateLender.splice(modifier.guarantorMateLender.length - 1, 0, ...add.addGuarantorMateLender)
              modifier.carLender.splice(modifier.carLender.length - 1, 0, ...add.addCarLender)
              modifier.afterLoanLender.splice(modifier.afterLoanLender.length - 1, 0, ...add.addAfterLoanLender)
              modifier.mortgageLender.splice(modifier.mortgageLender.length - 1, 0, ...add.addMortgageLender)
              this.productMaterial = modifier
            }
            this.fileAllList = add.fileAllList
            this.videoAllList = add.videoAllList
          } else {
            this.$msg._message('查询失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    getProductDetail() {
      this.$http._get(api.SYS_PRODUCT_DETAIL, this.productId).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            const detail = res.data
            detail.fileAllList.map(e => { e.name = e.filePath.substring(e.filePath.lastIndexOf('/') + 1) })
            this.fileAllList = detail.fileAllList || []
            this.videoAllList = detail.videoAllList || []
            this.productDetail = detail
            const productPicList = packageImgList([detail.productPic])
            this.productDetail.productPicNameList = productPicList[0]
            this.productDetail.productPicUrlList = productPicList[1]
          } else {
            this.$msg._message('查询失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
